<!DOCTYPE html>
<#assign ctx=Session.basePath>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>船队管理</title>
    <script>
        var shipid = '<#if shipid??>${shipid}<#else></#if>';
        var company =  '<#if company??>${company}<#else></#if>';
    </script>
    <link href="${ctx}/easyui/themes/bootstrap/easyui.css" rel="stylesheet" />
    <link href="${ctx}/easyui/themes/icon.css" rel="stylesheet" />
    <link href="${ctx}/inspiniain/font-awesome/css/font-awesome.css" rel="stylesheet">
    <script src="${ctx}/js/jquery-1.12.2.min.js"></script>
    <script src="${ctx}/lib/jquery.form.js"></script>
    <script src="${ctx}/easyui/jquery.easyui.min.js"></script>
    <script src="${ctx}/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script src="${ctx}/pagination/js/layer/layer.js"></script>

    <script>
        function onSubmit() {
            $('#contentForm').form('submit',{
                onSubmit:function(){
                    return $(this).form('enableValidation').form('validate');
                }
            });
        }
        function submitForm(){
            var valid = $("#contentForm").form('enableValidation').form('validate');
            if(valid){
                $("#contentForm").ajaxSubmit(function (response) {
                    if(response.success){
                        $("#window").window('close');
                        $('#dg').datagrid().load()
                    }else{
                        layer.msg("保存失败");
                    }
                })
            }
        }

        function addRows(index,obj){
            $(obj).css("display","none");
            index++;
            var html ="<tr>";
            html+="<td><input type='text' class='easyui-validatebox easyui-numberbox' data-options='required:true' id = 'longitude"+index+"' min='-180' max='180'precision='6' name='longitude' placeholder='经度'  style='width: 125px' /></td>";
            html+="<td><input type='text' class='easyui-validatebox easyui-numberbox' data-options='required:true' id = 'latitude"+index+"'min='-90' max='90'precision='6' name='latitude' placeholder='纬度' style='width: 125px' /></td>";
            html+="<td><a href='#' onclick='addRows("+index+",this)'>+</a></td>";
            html +="<tr>";
            $("#sub_table").append(html);
            var lon="#longitude"+index;
            $(lon).numberbox({
                required:true
            });
            var latt= "#latitude"+index;
            $(latt).numberbox({
                required:true
            });
            $('input').textbox();
        }

    </script>

    <script type="text/javascript">
        function loadAll(){
            var pager = $('#dg').datagrid({
                fitColumns:true,
                fit: true,
                loadFilter: function(data){
                    if(data != null && data.rows != null){
                        for(var i = 0; i < data.rows.length; i++){
                            var record = data.rows[i];
                            var shipName;
                            if(record.shipName!=null){
                                shipName = record.shipName;
                            }
                            var longitude = record.shipPositionInfo.longitude;
                            var latitude = record.shipPositionInfo.latitude;
                            var position = "<a href='#' onclick='locationMap(\""+longitude+"\",\""+latitude+"\",\""+shipName+"\")'><i style='font-size:20px;' class='fa fa-map-marker' aria-hidden='true'></i></a>";
                            record.shipName = shipName;
                            record.position = position;
                        }
                    }
                    return data;
                }
            });
        }
        function loadAll2(){
            var pager = $('#dg2').datagrid({
                fitColumns:true,
                fit: true,
                loadFilter: function(data){
                    if(data != null && data.rows != null){
                        for(var i = 0; i < data.rows.length; i++){
                            var record = data.rows[i];
                            var mmsi=record.mmsi;
                            var addthis = record.addthis =  "<a href='#' onclick='addShip(\""+mmsi+"\")'>添加关注</a>";
                        }
                    }
                    return data;
                }
            });
        }
        $(function(){
            loadAll();
            $("#search1").click(function () {
                alert($("#shipName").val());
                alert($("#shipType").combobox('getValue'));
                $('#dg').datagrid("load",{
                    shipName : $("#shipName").val(),
                    searchType:$("#shipType").combobox('getValue')
                })
            })
            $(".btn-add").click(function () {
                $("#contentForm").form("clear");
                $("#window").window('open');
                loadAll2();
            })
            $("#search2").click(function () {
                $('#dg2').datagrid("load",{
                    shipName : $("#ship_Name").val()
                })
            })
        })

        function locationMap(lon,lat,shipName) {
            //console.log("Longitude: "+lon+";Latitude: "+lat+";shipName: "+shipName);
//            window.parent.showPosition(lon,lat,shipName);
            console.log(lon+","+lat)
            if(lon!=="null"||lat!=="null")
            {
                window.parent.locMap(lon,lat);
            }


        }
        /**
         * 添加船舶
         * @param mmsi
         */
            function addShip(mmsi){
                $.ajax({
                    type: "POST",
                    url: "/manage/ship/user/addship",
                    data: {mmsi:mmsi },
                    success:function (data) {
                        if(data.result == true){
                            alert("添加成功！")
                            loadAll();
                        }
                    }
                })
        }
    </script>
    <style type="text/css">
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>

<div id="tb" style="padding:5px;height:auto">
    <div>
        搜索: <input type="text" id="shipName" style="width:120px" placeholder="请输入船舶名称或注册号"/>
        <select id="shipType" class="easyui-combobox" style="width:120px">
            <option value="1">自有船舶</option>
            <option value="2">关注船舶</option>
        </select>
        <a href="#" id="search1"  class="easyui-linkbutton btn-search" iconCls="icon-search" style="width: 80px;">查找</a>
        <a href="#" id="add"  class="easyui-linkbutton btn-add" iconCls="icon-add" style="width: 80px;">添加船舶</a>
    </div>
</div>
<table id="dg",
       data-options="rownumbers:true,singleSelect:true,pagination:true,url:'${ctx}/manage/ship/user/fleet/list?shipid=<#if shipid??>${shipid}<#else></#if>&company=<#if company??>${company}<#else></#if>',method:'post',toolbar:'#tb'">
    <thead>
    <tr>
        <#--<th data-options="field:'loginName',width:80">账号</th>-->

            <th data-options="field:'shipName',width:200">船名</th>
            <th data-options="field:'mmsi',width:60,align:'center'">MMSI</th>
            <th data-options="field:'position',width:60,align:'center'">定位</th>
    </tr>
    </thead>
</table>

<div id="window" class="easyui-window" title="添加船舶" data-options="modal:false,closed:true" inline="false"
     style="width:600px;height:300px;padding:10px;">
    <div id="tb2" style="padding:5px;height:auto">
        <div>
            搜索: <input type="text" id="ship_Name" style="width:120px" placeholder="请输入船舶名称或注册号"/>
            <a href="#" id="search2"  class="easyui-linkbutton btn-search" iconCls="icon-search" style="width: 80px;">查找</a>
        </div>
    </div>

    <table id="dg2"
           data-options="rownumbers:true,singleSelect:true,pagination:true,url:'${ctx}/manage/ship/user/fleet/other/list?shipid=<#if shipid??>${shipid}<#else></#if>&company=<#if company??>${company}<#else></#if>',method:'post',toolbar:'#tb2'">
        <thead>
        <tr>
            <th data-options="field:'shipname',width:230">船名</th>
            <th data-options="field:'mmsi',width:60,align:'center'">MMSI</th>
            <th data-options="field:'addthis',width:60,align:'center'">添加关注</th>
        </tr>
        </thead>
    </table>
</div>
</body>
</html>